<template>
  <div v-loading="loading">

    <div id="all-box" class="all-box">

      <div class="all-box-left">

        <el-card v-if="!loading" :class="{'left-box':true, 'left-box-normal': !scrolled, 'left-box-scrolled': scrolled}" style="width: 250px">

          <div v-for="item in postForm.groupList" :key="item.id" class="group-card">
            <div>
              <div style="line-height: 40px">
                <el-button style="font-size: 14px; font-weight: 700" type="text" @click="goAnchor(item.id)">{{ item.title }}</el-button>
                <el-divider />
              </div>
              <div class="group-card-body">
                <div>
                  共 <i class="num">{{ item.quCount }}</i> 题，共 <i class="num">{{ item.totalScore }}</i> 分
                </div>
              </div>

              <div class="card-box">
                <div v-for="card in item.quList" :key="card.id" class="item" @click="goAnchor(card.id)">
                  <div :class="{num:true, 'current': card.id==currentId}">{{ card.sort }}</div>
                </div>
              </div>

            </div>

          </div>

        </el-card>

      </div>

      <div id="all-box-center" class="all-box-center">
        <el-card v-for="item in postForm.groupList" :id="item.id" :key="item.id" class="content-card">
          <div v-for="(qu,index) in item.quList" :key="qu.id">
            <div :id="qu.id" class="list-box">
              <div class="list-qu">
                <qu-item-show
                  :show-type="true"
                  :value="qu"
                  :index="index"
                  :mode="3"
                  :state="0"
                  :show-analysis="showAnalysis"
                  :show-answer="showAnswer" />

                <div v-if="qu.quType==='99' " style="padding: 20px">
                  <div v-for="(sub,sx) in qu.subList" :key="sub.id">

                    <div class="sub-box">

                      <div style="flex-grow: 1">
                        <qu-item-show
                          :show-type="true"
                          :value="sub"
                          :index="sx"
                          :mode="3"
                          :state="0"
                          :show-analysis="showAnalysis"
                          :show-answer="showAnswer" />
                      </div>

                      <div class="sub-box-score">
                        <div class="opt-title">本题</div>
                        <el-input v-model="sub.score" size="mini" style="width: 60px;text-align: center" @change="calcSub(qu)" /><div class="opt-title">分</div>
                      </div>

                    </div>

                  </div>
                </div>

              </div>

              <div class="list-opt">

                <div class="check-box">
                  <div class="item">
                    <div class="opt-title">本题</div>
                    <el-input v-model="qu.score" size="mini" style="width: 60px" readonly /><div class="opt-title">分</div>
                  </div>

                  <div v-if="item.pathScore">
                    <el-divider />
                    <div v-for="an in qu.answerList" :key="an.id" class="item">
                      <div class="opt-title">{{ an.abc }}选项</div>
                      <el-input v-model="an.pathScore" size="mini" style="width: 60px" readonly />
                      <div class="opt-title">分</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </el-card>

      </div>

      <div class="all-box-right">

        <el-card v-if="!loading" :class="{'left-box':true, 'left-box-normal': !scrolled, 'left-box-scrolled': scrolled}" style="width: 200px">
          <div>试卷标题</div>
          <div>{{ postForm.title }}</div>
          <el-divider />
          <div>试卷总分</div>
          <div style="color: #0a84ff">{{ postForm.totalScore }}</div>
          <el-divider />
          <div>试题数量</div>
          <div style="color: #FF4B50">{{ postForm.quCount }}</div>
          <el-divider />
          <div>试卷分类</div>
          <div style="color: #0a84ff">{{ postForm.catId_dictText }}</div>
          <el-divider />

          <div style="margin-top: 20px">
            <div>
              <el-checkbox v-model="showAnalysis">解析</el-checkbox>
              <el-checkbox v-model="showAnswer">答案</el-checkbox>
            </div>

            <el-button v-print="printObj" type="primary" size="small" title="试卷打印">打印试卷</el-button>
          </div>

        </el-card>
      </div>

    </div>

  </div>
</template>

<script>
import { apiPreviewTmpl } from '@/api/tmpl/tmpl'
import { scrollTo } from '@/utils/scroll-to'
import QuItemShow from '@/views/admin/repo/qu/components/QuItemShow'

export default {
  components: { QuItemShow },
  data() {
    return {
      currentId: '',
      showAnalysis: true,
      showAnswer: true,
      loading: false,
      scrolled: false,
      postForm: {},
      // 打印对象
      printObj: {
        id: 'all-box-center',
        popTitle: ''
      }
    }
  },

  watch: {

    // 重新计算分数
    'postForm.groupList': {
      handler(val) {
        let userScore = 0
        for (let i = 0; i < val.length; i++) {
          const item = val[i]

          let groupScore = 0
          const quList = item.quList
          for (let j = 0; j < quList.length; j++) {
            groupScore += parseInt(quList[j].actualScore)
          }

          item.userScore += groupScore
          userScore += groupScore
        }

        this.postForm.userScore = userScore
      },
      deep: true
    }

  },

  mounted() {
    // 监听滚动条
    window.addEventListener('scroll', () => {
      let scrollTop = 0
      if (document.documentElement && document.documentElement.scrollTop) {
        scrollTop = document.documentElement.scrollTop
      } else if (document.body) {
        scrollTop = document.body.scrollTop
      }

      if (scrollTop > 85) {
        this.scrolled = true
      } else {
        this.scrolled = false
      }
    })
  },
  created() {
    const id = this.$route.params.id
    if (id !== undefined) {
      this.fetchData(id)
    }
  },

  methods: {

    // 到指定位置
    goAnchor(selector) {
      this.currentId = selector
      const anchor = document.getElementById(selector)
      const to = anchor.offsetTop + 80
      scrollTo(to, 600, function() {
        console.log('滑动到指定位置！')
      })
    },

    // 获取试卷内容
    fetchData(id) {
      this.loading = true
      apiPreviewTmpl(id).then(res => {
        // 试卷内容
        this.postForm = res.data
        this.loading = false

        // 打印试卷标题
        this.printObj.popTitle = res.data.title
      }).catch(() => {
        this.loading = false
      })
    },

    // 计算子题目总分数
    calcSub(qu) {
      const subList = qu.subList
      let total = 0
      for (let i = 0; i < subList.length; i++) {
        total = this.$calc.add(total, subList[i].score)
      }
      // 题目分数
      qu.score = total
    },

    prints() {
      const prints = document.getElementById('all-box-center')
      prints.title = this.postForm.title
    }
  }
}
</script>

<style scoped>

.all-box{
  display: flex;
  flex-direction: row
}

.all-box-left{
  width: 250px;
  flex: 0 0 250px
}

.all-box-center{
  flex-grow: 1;
  padding-left: 20px;
  padding-right: 20px
}

.all-box-right{

  width: 200px;
  flex: 0 0 200px;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  font-weight: 700;
}

.check-box{
  background: #f5f5f5; padding: 20px; margin-left: 20px; line-height: 40px;
  width: 180px;
}

.check-box .item{
  display: flex; flex-direction: row; align-items: center
}

.group-card{
  margin-bottom: 15px;
  line-height: 28px;
  width: 100%;
}

.group-card-body {
  line-height: 22px;
  font-size: 14px;
}

.group-card .num{
  color: #1890FF;
}

.left-box{
  height: calc(100vh - 120px);
  position: fixed;
  overflow: auto;
  clear: both;
}

.left-box-normal{
  top: 103px;
}

.left-box-scrolled{
  top: 20px;
  height: calc(100vh - 40px);
}

.content-card{
  margin-bottom: 20px;
  line-height: 28px;
}

/deep/
.el-divider--horizontal{
  margin: 5px 0;
}

.opt-box{
  background: #eee;
  padding: 10px;
  text-align: center;
  margin-top: 10px;
  width: 180px;
  float: right;
}

.opt-title{
  width: 42px;
  font-size: 12px;
  margin-right: 5px;
  display: inline-block;
  text-align: center;
}

/deep/
.card-box .item {
  height: 20px !important;
}

.sub-box{
  display: flex;
  width: 100%;
  border: #eee 1px solid;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px
}

.sub-box-score {
  width: 150px;
  display: flex;
  justify-content: flex-end;
}

</style>

